/*
 * @Author: wangjq4214
 * @Date: 2022-05-03 22:42:37
 * @LastEditTime: 2022-05-08 15:17:16
 * @LastEditors: wangjq4214
 */

import { Result, Space, Button, Typography } from '@arco-design/web-react';
import { stepAtom } from '../model';

const Title = Typography.Title;
const Paragraph = Typography.Paragraph;

const Success = () => {
  const navigate = useNavigate();
  const setStep = useSetAtom(stepAtom);

  const handleOneMore = () => {
    setStep('back');
  };

  const handleDetail = () => {
    navigate('/compute/query');
  };

  return (
    <div className="text-center">
      <Result status="success" />
      <Space size={16}>
        <Button key="view" type="primary" onClick={handleDetail}>
          查看详情
        </Button>
        <Button key="again" type="secondary" onClick={handleOneMore}>
          再次创建
        </Button>
      </Space>
      <div className="w-895px mt-54px p-20px text-left bg-$color-fill-2">
        <Title heading={6} style={{ marginTop: 0 }}>
          创建计算集群说明
        </Title>
        <Paragraph style={{ marginBottom: 0 }}>
          可以选择创建MapReduce、MPI计算集群，提供统一的入口与管理机制。
        </Paragraph>
      </div>
    </div>
  );
};

export default Success;
